<template>
  <div class="Chartmain">
    <div class="menu">
      <TopMenu />
    </div>
    <div id="map" />
    <div class="left">
      <div class="left_1 common-home-bg">
        <home-title :title="'室内环境监测'" />
        <div class="left_1_contant contantBox">
          <div class="left1Top">
            <div class="left1TopLeft">
              <div class="ltf_t">
                <div class="ltf_t_num">15</div>
                <div class="ltf_t_iconText">
                  <img src="@/assets/pic/t.png" alt="">
                  <div>空气良好</div>
                </div>
              </div>
              <div class="ltf_b">
                <span>温度:{{ data1.temperature }}</span>
                <span> 湿度:{{ data1.humidity }}</span>
                <span>二氧化碳:{{ data1.co2 }}</span>
                <span>有机气体:{{ data1.tvoc }}</span>
              </div>
            </div>
            <div class="left1TopRight">
              <div class="ltr1 ltr">
                <div class="cont">
                  <div class="ltr1L cont1">
                    <div class="ltr1LT cont2">PM2.5</div>
                    <div class="ltr1LB cont3">可入肺颗粒物</div>
                  </div>
                  <div class="ltr1R cont4">
                    {{ data1.pm2 }}<span class="unit">{{ data1.pm2Unit }}</span>
                  </div>
                </div>
                <div class="line1" />
              </div>

              <div class="ltr2 ltr">
                <div class="cont">
                  <div class="ltr2L cont1">
                    <div class="ltr2LT cont2">PM10</div>
                    <div class="ltr2LB cont3">可吸入颗粒物</div>
                  </div>
                  <div class="ltr2R cont4">
                    {{ data1.m10 }}<span class="unit">{{ data1.m10Unit }}</span>
                  </div>
                </div>
                <div class="line2" />
              </div>

              <div class="ltr3 ltr">
                <div class="cont">
                  <div class="ltr3L cont1">
                    <div class="ltr3LT cont2">甲醛</div>
                    <div class="ltr3LB cont3">一类致癌物</div>
                  </div>
                  <div class="ltr3R cont4">
                    {{ data1.ch2o
                    }}<span class="unit">{{ data1.ch2oUnit }}</span>
                  </div>
                </div>
                <div class="line3" />
              </div>
            </div>
          </div>
          <div class="lineBot" />
          <div class="leftBot">
            <div class="lBot_text">24小时数据</div>
            <div class="lBotR">
              <div class="lBotRO">
                <div class="radio r1" />
                <div class="radio_text rt1">PM2.5</div>
              </div>
              <div class="lBotRO">
                <div class="radio r2" />
                <div class="radio_text rt2">PM10</div>
              </div>
              <div class="lBotRO">
                <div class="radio r3" />
                <div class="radio_text rt3">甲醛</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="left_2 common-home-bg">
        <home-title :title="'土壤监测'" />
        <div class="left_2_contant contantBox">
          <div class="left_2_box l2b1">
            <div class="left_2_box_1">
              <img src="@/assets/pic/shidu.png" alt="">
            </div>
            <div class="left_2_box_2">
              <div class="left_2_box_2_t">
                {{ data3.temperature
                }}<span class="unit">{{ data3.temperatureUnit }}</span>
              </div>
              <div class="left_2_box_2_b">土壤温度</div>
            </div>
          </div>
          <div class="left_2_box l2b2">
            <div class="left_2_box_1">
              <img src="@/assets/pic/shui.png" alt="">
            </div>
            <div class="left_2_box_2">
              <div class="left_2_box_2_t">
                {{ data3.humidity
                }}<span class="unit">{{ data3.humidityUnit }}</span>
              </div>
              <div class="left_2_box_2_b">土壤湿度</div>
            </div>
          </div>
          <!-- <div class="left_2_box l2b3">
            <div class="left_2_box_1">
              <img src="@/assets/pic/ph.png" alt="">
            </div>
            <div class="left_2_box_2">
              <div class="left_2_box_2_t">20</div>
              <div class="left_2_box_2_b">PH值</div>
            </div>
          </div> -->
        </div>
      </div>
      <div class="left_3 common-home-bg">
        <home-title :title="'室外超声波气象站'" />
        <div class="left_3_contant contantBox">
          <div class="left3_L">
            <p>温度：{{ data2.temperature }}</p>
            <p>湿度：{{ data2.humidity }}</p>
            <p>风速：{{ data2.windSpeed }}</p>
            <p>风力：{{ data2.windForce }}</p>
            <p>风向：{{ data2.windDirection }}</p>
          </div>
          <div class="left3_R">
            <p>PM2. 5: {{ data2.atmosphericPressure }}</p>
            <p>降雨量：{{ data2.pm2 }}</p>
            <p>光照度：{{ data2.pm10 }}</p>
            <p>噪声：{{ data2.noise }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="right_1 common-home-bg">
        <home-title :title="'设备预警'" />
        <div class="right_1_contant contantBox">
          <div
            v-for="(item, index) in warningList"
            :key="index"
            class="right1 r1"
          >
            <p class="right1_l">{{ item.deviceName }}-{{ item.type }}</p>
            <p class="right1_r">{{ item.createTime }}</p>
          </div>
        </div>
      </div>
      <div class="right_2 common-home-bg">
        <home-title :title="'近五日数据波动'" />
        <div ref="echarts_mains1" class="right_2_contant contantBox">
          <AllEchartsWarn
            :main-width="mainWidth"
            :main-height="mainHeight"
            :warning-data="warningData"
          />
        </div>
      </div>
      <div class="right_3 common-home-bg">
        <home-title :title="'设备信息'" />
        <div class="right_3_contant contantBox">
          <div class="right3">
            <div class="right3_l r3l1">
              <div class="right3_t">设备总数</div>
              <div class="right3_b">{{ deviceNum.all }}</div>
            </div>
            <div class="right3_l r3l2">
              <div class="right3_t">设备在线数</div>
              <div class="right3_b">{{ deviceNum.online }}</div>
            </div>
            <div class="right3_l r3l3">
              <div class="right3_t">设备离线数</div>
              <div class="right3_b">{{ deviceNum.unline }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div v-if="warinList.length" class="warn">
        <!-- <div v-for="(item, inedx) in warinList" :key="index" class="warn1">
          <img src="@/assets/pic/warning.png" alt="">
          <p>
            提示警告：{{ item.deviceId }}--{{
              item.deviceType
            }}发生异常现象，请尽快处理
          </p>
        </div> -->
        <div  class="warn1">
          <img src="@/assets/pic/warning.png" alt="">
          <p>
            提示警告：{{ warinList[0].deviceId }}--{{
              warinList[0].deviceType
            }}发生异常现象，请尽快处理
          </p>
        </div>
      </div>

      <div class="btn">
        <div class="btn_p" @click="bt1">
          <img src="@/assets/pic/enlarge.png" alt="" class="bt1">
        </div>
        <div class="btn_p" @click="bt2">
          <img src="@/assets/pic/narrow.png" alt="" class="bt1">
        </div>
        <div class="btn_p" @click="bt3">
          <img src="@/assets/pic/return.png" alt="" class="bt1">
        </div>
        <div class="btn_p" @click="bt4">
          <img src="@/assets/pic/pos.png" alt="" class="bt1">
        </div>
        <div class="btn_p" @click="bt5">
          <img src="@/assets/pic/jianzhu.png" alt="" class="bt1">
        </div>
      </div>
    </div>
    <!--显示大图-->
    <el-dialog
      v-if="bigShow"
      :visible.sync="bigShow"
      :title="bigObject.name"
      width="1000px"
      top="1vh"
      :modal="false"
      style="height: 400px"
    >
      <template slot="title">
        <el-row align="center" justify="space-between" :gutter="20" type="flex">
          <el-col>
            <div style="line-height: 40px">{{ bigObject.name }}</div>
          </el-col>
          <el-col :span="8">
            <div>
              <el-select
                v-model="nowType"
                placeholder="请选择"
                @change="getNewList"
              >
                <el-option
                  v-for="item in typeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </el-col>
        </el-row>
      </template>
      <el-form class="dashboard-big" :inline="true" label-position="left">
        <el-form-item label="查询时间">
          <el-date-picker
            v-model="bigObject.timeSel"
            value-format="timestamp"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="submitTime(bigObject.timeSel, nowIndex)"
          />
        </el-form-item>
        <el-form-item>
          <el-switch
            v-model="bigObject.switchButton"
            active-color="#008EE8"
            inactive-color="#064f77"
            active-text="定时刷新"
          />
          <el-switch
            v-model="bigObject.dataType"
            style="margin-left: 30px"
            active-color="#008EE8"
            inactive-color="#064f77"
            active-text="偏移量"
            inactive-text="距离量"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="small"
            @click="bigDataTable = !bigDataTable"
          >图表转换</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="small"
            @click="bigObject.inverse = !bigObject.inverse"
          >翻转</el-button>
        </el-form-item>
      </el-form>
      <data-table
        v-if="bigDataTable"
        :data="bigObject.data"
        :data-type="bigObject.dataType"
        :is-big="true"
      />
      <div v-if="!bigDataTable" class="chart">
        <line-charts
          v-if="bigObject.data.length"
          :index="nowIndex"
          :data="bigObject.data"
          :inverse="bigObject.inverse"
          :data-type="bigObject.dataType"
          :is-big="true"
        />
        <div
          v-if="!bigObject.data.length"
          class="no-data"
          style="margin-bottom: 80px"
        >
          您查询的此时间段暂无数据！！
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// const QMap = require('@/utils/qmap.js')
// import '@/utils/qmap.css'
// console.log(111, QMap)
import { getOutdoorAirRealTime, getIndoorAirRealTime, getSoilRealTime, getErrorData, get_error_by_day, get_all_device, get_device_list } from '@/api/chart'
import { getIndoorAir, getRain, getOutdoorAir, getSoil, getLaser, getCord } from '@/api/data'
import { getIndoorAirThreshold, getOutdoorAirThreshold, getRainThreshold, getSoilThreshold, getLaserThreshold, getCordThreshold } from '@/api/warning'
import { error } from '@/api/controller'
import HomeTitle from '@/components/HomeTitle'
import TopMenu from '@/components/TopMenu'
import allEchartsWarn from './components/allEchartsWarn'
import LineCharts from './components/LineChart'
import DataTable from './components/DataTable'
export default {
  components: {
    HomeTitle,
    TopMenu,
    AllEchartsWarn: allEchartsWarn,
    LineCharts,
    DataTable
  },
  data() {
    return {
      bigDataTable: false,
      bigObject: {
        timeSel: '',
        switchButton: false,
        dataType: false,
        inverse: false,
        data: [],
        name: ''
      },
      nowIndex: 0,
      bigShow: false,
      map: null,
      camera: null,
      fly: null,
      labelManager: null,
      position: null,
      lavel: null,
      mainWidth: null,
      mainHeight: null,
      height: 2000,
      x: 79.840364,
      y: 31.675754,
      bt4Flag: true,
      bt5Flag: true,
      tileData: null,
      warningData: null,
      pos: [

      ],
      data1: {
        temperature: null,
        humidity: null,
        co2: null,
        tvoc: null,
        pm2: null,
        pm2Unit: null,
        m10: null,
        m10Unit: null,
        ch2o: null,
        ch2oUnit: null
      },
      data2: {
        temperature: null,
        humidity: null,
        windSpeed: null,
        windForce: null,
        windDirection: null,
        atmosphericPressure: null,
        pm2: null,
        pm10: null,
        noise: null
      },
      data3: {
        temperature: null,
        temperatureUnit: null,
        humidity: null,
        humidityUnit: null
      },
      evt: null,
      warningList: [],
      deviceNum: {
        all: null,
        online: null,
        unline: null
      },
      idTypeList: [
        {
          label: '雨量传感器',
          value: 0,
          num: 1,
          apiname: getRain,
          typeList: getRainThreshold
        },
        {
          label: '土壤传感器',
          value: 1,
          num: 1,
          apiname: getSoil,
          typeList: getSoilThreshold
        },
        {
          label: '拉绳传感器',
          value: 2,
          num: 1,
          apiname: getCord,
          typeList: getCordThreshold
        },
        {
          label: '激光传感器',
          value: 3,
          num: 1,
          apiname: getLaser,
          typeList: getLaserThreshold
        },
        {
          label: '室内传感器',
          value: 4,
          num: 1,
          apiname: getIndoorAir,
          typeList: getIndoorAirThreshold
        },
        {
          label: '室外传感器',
          value: 5,
          num: 1,
          apiname: getOutdoorAir,
          typeList: getOutdoorAirThreshold
        }
      ],
      nowApi: null,
      typeList: [],
      nowType: 0,
      warinList: []
    }
  },
  watch: {},
  mounted() {
    setInterval(() => {
      if (this.$refs.echarts_mains1) {
        this.mainWidth = this.$refs.echarts_mains1.clientWidth
      }
      if (this.$refs.echarts_mains1) {
        this.mainHeight = this.$refs.echarts_mains1.clientHeight
      }
      // mian宽
    }, 500)
    this.apiInit()
    setInterval(() => {
      this.apiInit()
    }, 100000)
    this.init()
    this.initTime()
  },
  methods: {
    initTime() {
      this.time = window.setInterval(this.refreshCount, 45000)
    },
    /* 刷新对应的*/
    refreshCount() {
      if (this.bigObject.switchButton) {
        const end = Date.now()
        const start = this.bigObject.timeSel[0]
        this.bigObject.timeSel = [start, end]
        this.nowApi({
          type: this.nowType,
          startTime: start,
          endTime: end
        }).then((res) => {
          this.bigObject.data = res.data
        })
      }
    },
    // 更改时间查询
    submitTime(list, i) {
      if (list.length) {
        this.getNewData()
      }
    },
    apiInit() {
      error().then(res => {
        if (res.status === 200) {
          this.warinList = res.data
        }
      })
      getIndoorAirRealTime().then(res => {
        if (res.status === 200) {
          this.filterData(res.data, this.data1, 'temperature', 1)
          this.filterData(res.data, this.data1, 'humidity', 1)
          this.filterData(res.data, this.data1, 'co2', 1)
          this.filterData(res.data, this.data1, 'tvoc', 1)
          this.filterData(res.data, this.data1, 'pm2', 2, 'pm2Unit')
          this.filterData(res.data, this.data1, 'm10', 2, 'm10Unit')
          this.filterData(res.data, this.data1, 'ch2o', 2, 'ch2oUnit')
        }
      })

      getSoilRealTime().then(res => {
        if (res.status === 200) {
          this.filterData(res.data, this.data3, 'temperature', 2, 'temperatureUnit')
          this.filterData(res.data, this.data3, 'humidity', 2, 'humidityUnit')
        }
      })

      getOutdoorAirRealTime().then(res => {
        if (res.status === 200) {
          this.filterData(res.data, this.data2, 'temperature', 1)
          this.filterData(res.data, this.data2, 'humidity', 1)
          this.filterData(res.data, this.data2, 'windSpeed', 1)
          this.filterData(res.data, this.data2, 'windForce', 1)
          this.filterData(res.data, this.data2, 'windDirection', 1)
          this.filterData(res.data, this.data2, 'atmosphericPressure', 1)
          this.filterData(res.data, this.data2, 'pm2', 1)
          this.filterData(res.data, this.data2, 'pm10', 1)
          this.filterData(res.data, this.data2, 'noise', 1)
        }
      })
      getErrorData().then(res => {
        if (res.status === 200) {
          this.warningList = res.data.pageList
        }
      })
      get_error_by_day({
        startTime: new Date().getTime()
      }).then(res => {
        if (res.status === 200) {
          this.warningData = res.data
        }
      }),
      get_all_device().then(res => {
        if (res.status === 200) {
          this.deviceNum.all = res.data.filter(it => { return it.name === '设备总数' })[0].count
          this.deviceNum.online = res.data.filter(it => { return it.name === '在线设备数' })[0].count
          this.deviceNum.unline = res.data.filter(it => { return it.name === '离线设备数' })[0].count
        }
      })
    },
    filterData(data, dataThis, name, type, name2) {
      const a = data.filter(it => { return it.englishName === name })[0]
      if (type === 1) {
        dataThis[name] = a.threshold + a.unit
      } else {
        dataThis[name] = a.threshold
        dataThis[name2] = a.unit
      }
    },
    init() {
      this.map = new QMap.Map('map', {
        // imageryProvider: new QMap.GoogleImageryProvider()
        imageryProvider: new QMap.ArcGisMapServerImageryProvider({
          url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
          enablePickFeatures: false
        }),
        fullscreenButton: true,
        contextOptions: {
          requestWebgl2: true,
          msaa: true,
          multisampleNum: 1
        }
      })

      this.loadPhotogrammetry()
      // this.map.imageryLayers.remove(this.map.imageryLayers.get(0))
      // const imageLayer = new QMap.ImageryLayer(
      //   new QMap.UrlTemplateImageryProvider({
      //     url: 'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
      //   }),
      //   {
      //     dehaze: false,
      //     blankTileEliminate: true
      //   }
      // )
      // this.map.imageryLayers.add(imageLayer)
      this.map.scene.globe.depthTestAgainstTerrain = false
      if (this.$route.params.lng) {
        this.map.scene.camera.flyTo({
          destination: new QMap.Cartesian3.fromDegrees(
            this.$route.params.lng,
            this.$route.params.lat,
            this.height - 1000
          )
        })
      } else {
        this.map.scene.camera.flyTo({
          destination: new QMap.Cartesian3.fromDegrees(
            this.x,
            this.y,
            this.height
          )
        })
      }

      this.fly = new QMap.Fly(this.map, {
        complete: () => { }
      })
      this.labelManager = new QMap.LabelManager(this.map)
      this.addLabelTextIcon()
      // this.position = new QMap.Cartesian3.fromDegrees(120.801769, 30.557163)
    },
    // getColorRamp(elevationRamp, isVertical = true) {
    //   var ramp = document.createElement('canvas')
    //   ramp.width = isVertical ? 1 : 100
    //   ramp.height = isVertical ? 100 : 1
    //   var ctx = ramp.getContext('2d')
    //   var values = elevationRamp
    //   var grd = isVertical
    //     ? ctx.createLinearGradient(0, 0, 0, 100)
    //     : ctx.createLinearGradient(0, 0, 100, 0)
    //   grd.addColorStop(values[0], '#598da9') // black
    //   grd.addColorStop(values[1], '#104a95') // blue
    //   ctx.fillStyle = grd
    //   if (isVertical) ctx.fillRect(0, 0, 1, 100)
    //   else ctx.fillRect(0, 0, 100, 1)
    //   return ramp
    // },

    // 模型
    get3DTileset(tilesUrl) {
      const options = {
        url: tilesUrl
      }
      const tileset = new QMap.QMap3DTileset(options)
      return tileset
    },
    update3dtilesMaxtrix(params) {
      const mx = QMap.Matrix3.fromRotationX(QMap.Math.toRadians(params.rx))
      const my = QMap.Matrix3.fromRotationY(QMap.Math.toRadians(params.ry))
      const mz = QMap.Matrix3.fromRotationZ(QMap.Math.toRadians(params.rz))
      const rotationX = QMap.Matrix4.fromRotationTranslation(mx)
      const rotationY = QMap.Matrix4.fromRotationTranslation(my)
      const rotationZ = QMap.Matrix4.fromRotationTranslation(mz)
      // 平移
      const position = QMap.Cartesian3.fromDegrees(params.tx, params.ty, params.tz)
      const m = QMap.Transforms.eastNorthUpToFixedFrame(position)
      const scale = QMap.Matrix4.fromUniformScale(1.5)
      // //缩放
      QMap.Matrix4.multiply(m, scale, m)
      // 旋转、平移矩阵相乘
      QMap.Matrix4.multiply(m, rotationX, m)
      QMap.Matrix4.multiply(m, rotationY, m)
      QMap.Matrix4.multiply(m, rotationZ, m)
      // 赋值给tileset
      return m
    },
    clear() {
      this.map.entities.removeAll()
      this.tileData && this.map.scene.primitives.remove(this.tileData)
    },
    loadPhotogrammetry() {
      this.clear()
      const url = 'http://212.64.74.64:8001/tileset.json'
      this.tileData = this.get3DTileset(url)
      this.map.scene.primitives.add(this.tileData)
      this.tileData.readyPromise.then(tileset => {
        const params = { tx: 79.840364, ty: 31.675754, tz: 13, rx: 0, ry: 0, rz: 0 }
        tileset._root.transform = this.update3dtilesMaxtrix(params)
        this.map.zoomTo(tileset)
        // // 调整倾斜摄影图层的高度
      })
    },
    zhuan(lng, lat, h) {
      return [(lng * 180) / Math.PI, (lat * 180) / Math.PI]
    },
    bt1() {
      const a = this.map.scene.camera.positionCartographic
      const b = this.zhuan(a.longitude, a.latitude, a.height)
      const c = this.map.scene.camera.direction
      const d = this.map.scene.camera.up
      this.x = b[0]
      this.y = b[1]
      this.height = a.height
      if (this.height > 10) {
        this.height -= this.height / 5
      }
      this.map.scene.camera.flyTo({
        destination: new QMap.Cartesian3.fromDegrees(
          this.x,
          this.y,
          this.height
        ),
        orientation: {
          direction: new QMap.Cartesian3(c.x, c.y, c.z),
          up: new QMap.Cartesian3(d.x, d.y, d.z)
        },
        duration: 1.4
      })
    },
    bt2() {
      const a = this.map.scene.camera.positionCartographic
      const b = this.zhuan(a.longitude, a.latitude, a.height)
      const c = this.map.scene.camera.direction
      const d = this.map.scene.camera.up
      this.x = b[0]
      this.y = b[1]
      this.height = a.height
      if (this.height < 30000) {
        this.height += this.height / 5
      }
      this.map.scene.camera.flyTo({
        destination: new QMap.Cartesian3.fromDegrees(
          this.x,
          this.y,
          this.height
        ),
        orientation: {
          direction: new QMap.Cartesian3(c.x, c.y, c.z),
          up: new QMap.Cartesian3(d.x, d.y, d.z)
        },
        duration: 1.4
        // orientation: new QMap.Cartesian3(c.x,
        //   c.y,
        //   c.z),
      })
    },
    bt3() {
      this.height = 2000
      this.x = 79.840364
      this.y = 31.675754
      this.map.scene.camera.flyTo({
        destination: new QMap.Cartesian3.fromDegrees(
          this.x,
          this.y,
          this.height
        ),
        duration: 2
      })
    },
    bt4() {
      this.bt4Flag = !this.bt4Flag
      this.bt4Flag ? this.addLabelTextIcon() : this.removeAllLable()
    },
    bt5() {
      this.bt5Flag = !this.bt5Flag
      this.bt5Flag ? this.loadPhotogrammetry() : this.clear()
    },
    addLabelTextIcon() {
      if (this.labelManager) {
        if (this.label) {
          this.labelManager.remove(this.label)
          this.label = null
        }
        this.imgUrl = './mart1.png'
        get_device_list().then(res => {
          if (res.status === 200) {
            this.pos = res.data
            this.pos.forEach((item, index) => {
              // if (index === 2) { item.lng = 120.801769; item.lat = 30.557163 }
              if (item.lng === null) item.lng = 0
              if (item.lat === null) item.lat = 0
              item.lng = Number(item.lng)
              item.lat = Number(item.lat)
              this.label = this.labelManager.addLabelTextIcon(
                new QMap.Cartesian3.fromDegrees(item.lng, item.lat),
                this.imgUrl,
                item.deviceName,
                {
                  id: item.deviceType,
                  scale: 0.3,
                  textTop: 55,
                  fontColor: new QMap.Color(1, 1, 1, 1),
                  font: '35px Microsoft YaHei'
                }
              )
            })
            this.addPointPopup()
          }
        })
        // this.pos.forEach((it) => {
        //   this.label = this.labelManager.addLabelTextIcon(
        //     new QMap.Cartesian3.fromDegrees(it.lng, it.lat),
        //     this.imgUrl,
        //     it.name,
        //     {
        //       id: it.id,
        //       scale: 0.3,
        //       textTop: 55,
        //       fontColor: new QMap.Color(1, 1, 1, 1),
        //       font: '35px Microsoft YaHei'
        //     }
        //   )
        // })
        // this.label = this.labelManager.addLabelTextIcon(
        //   this.position,
        //   this.imgUrl,
        //   '监测点1',
        //   {
        //     id: 1,
        //     scale: 0.3,
        //     textTop: 55,
        //     fontColor: new QMap.Color(1, 1, 0, 1),
        //     font: '35px Microsoft YaHei'
        //   }
        // )
        // this.label = this.labelManager.addLabelTextIcon(
        //   this.position1,
        //   this.imgUrl,
        //   '监测点2',
        //   {
        //     id: 2,
        //     scale: 0.3,
        //     textTop: 55,
        //     fontColor: new QMap.Color(1, 1, 0, 1),
        //     font: '35px Microsoft YaHei'
        //   }
        // )
      }
    },
    removeAllLable() {
      if (this.labelManager) {
        this.labelManager.removeAll()
        this.label = null
      }
    },
    checkPos(id) {
      return this.pos.filter((it) => {
        return it.deviceType === id
      })
    },
    addPointPopup() {
      const handler1 = new QMap.ScreenSpaceEventHandler(this.map.scene.canvas)
      const _this = this
      const QMap1 = QMap
      handler1.setInputAction(function(evt) {
        var pick = _this.map.scene.pick(evt.position)
        const pos = _this.checkPos(pick.id)
        const end = Date.now()
        const start = Date.now() - 90 * 24 * 60 * 60 * 100
        _this.bigObject.timeSel = [start, end]
        _this.bigObject.inverse = false
        _this.nowApi = _this.idTypeList.filter(it => { return it.value === pos[0].deviceType })[0].apiname
        const typeList = _this.idTypeList.filter(it => { return it.value === pos[0].deviceType })[0].typeList
        typeList().then(res => {
          if (res.status === 200) {
            _this.typeList = res.data.map((item, index) => {
              return { value: index, label: item.name }
            })
          }
        })
        _this.bigObject.name = _this.idTypeList.filter(it => { return it.value === pos[0].deviceType })[0].label
        _this.getNewData()
        _this.x = pos[0].lng
        _this.y = pos[0].lat
        _this.map.scene.camera.flyTo({
          destination: new QMap1.Cartesian3.fromDegrees(
            _this.x,
            _this.y,
            _this.height
          ),
          duration: 1.8
        })
        _this.bigShow = true
        // _this.$router.push({ name: 'Chart', query: { id: pick.id }})
      }, QMap.ScreenSpaceEventType.LEFT_CLICK)
    },
    getNewList() {
      this.getNewData()
    },
    // 折线图
    getNewData() {
      this.nowApi({
        type: this.nowType + 1,
        startTime: this.bigObject.timeSel[0],
        endTime: this.bigObject.timeSel[1]
      }).then(res => {
        if (res.status === 200) this.bigObject.data = res.data
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.main,
#map {
  width: 100%;
  height: 100%;
  position: absolute;
}
.chart {
  height: 310px;
  margin-bottom: 50px;
}
.main {
  display: flex;
  align-items: center;
}
.menu {
  position: absolute;
  width: 100%;
  // height: 20%;
  top: 0;
  z-index: 1;
}
.common-home-bg {
  background: url("~@/assets/pic/home-bg.png") no-repeat;
  background-size: 100% 100%;
  padding: 0.15rem;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 2vh;
  background-color: rgba($color: #020f1e, $alpha: 0.63);
}
.contantBox {
  // background-color: red;
  height: calc(100% - 3.5vh);
}
.left {
  position: absolute;
  height: 90%;
  // min-width: 23%;
  left: 3%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  margin-top: 6%;
  .unit {
    font-size: 0.16rem;
  }
  .left_1 {
    height: 45%;
    width: 100%;
    .left_1_contant {
      .left1Top {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height: 80%;
        width: 100%;
        .left1TopLeft {
          width: 40%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          .ltf_t {
            height: 40%;
            width: 100%;
            margin-top: 0.1rem;
            .ltf_t_num {
              margin-top: 0.1rem;
              font-size: 0.6rem;
              font-family: DIN;
              font-weight: 900;
              color: #41bdff;
            }
            .ltf_t_iconText {
              font-size: 0.2rem;
              color: #41bdff;
              font-family: PingFangSC;
              font-weight: 400;
              display: flex;
              flex-direction: row;
              justify-content: flex-start;
              align-items: center;
              img {
                width: 0.24rem;
              }
            }
          }
          .ltf_b {
            margin-left: 0.1rem;
            margin-top: 0.3rem;
            height: 50%;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: flex-start;
            span {
              font-size: 0.14rem;
              font-family: PingFangSC;
              font-weight: 400;
              color: #41bdff;
            }
          }
        }
        .left1TopRight {
          height: 100%;
          width: 60%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
          .ltr {
            height: 30%;
            width: 100%;
          }
          .cont {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            font-size: 0.24rem;
            height: 95%;
            .cont1 {
              width: 60%;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: flex-start;
            }
            .cont2 {
              font-family: PingFangSC;
              font-weight: 600;
              font-size: 0.24rem;
              // color: #3cedfb;
            }
            .cont3 {
              font-family: PingFangSC;
              font-weight: 600;
              font-size: 0.16rem;
              // color: #3cedfb;
            }
            .cont4 {
              font-size: 0.4rem;
              font-family: DIN;
              font-weight: 900;
              // color: #3cedfb;
            }
          }
          .line1 {
            width: 100%;
            height: 0.03rem;
            background: #3cedfb;
          }
          .line2 {
            width: 100%;
            height: 0.03rem;
            background: #ffe400;
          }
          .line3 {
            width: 100%;
            height: 0.03rem;
            background: #41bdff;
          }
          .ltr1 {
            color: #3cedfb;
          }
          .ltr2 {
            color: #ffe400;
          }
          .ltr3 {
            color: #41bdff;
          }
        }
      }
      .lineBot {
        margin: 0.1rem 0;
        width: 100%;
        height: 0.01rem;
        background: #44beff;
      }
      .leftBot {
        height: 14%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        .lBot_text {
          width: 30%;
          font-size: 0.16rem;
          font-family: PingFangSC;
          font-weight: 400;
          color: #41bdff;
        }
        .lBotR {
          width: 60%;
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          align-items: center;
          .lBotRO {
            width: 30%;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
          }
          .radio {
            width: 0.1rem;
            height: 0.1rem;
            border-radius: 50%;
          }
          .radio_text {
            font-size: 0.16rem;
            font-family: PingFangSC;
            font-weight: 600;
            color: #3cedfb;
          }
          .r1 {
            background: #3cedfb;
          }
          .r2 {
            background: #ffe400;
          }
          .r3 {
            background: #41bdff;
          }
          .rt1 {
            color: #3cedfb;
          }
          .rt2 {
            color: #ffe400;
          }
          .rt3 {
            color: #41bdff;
          }
        }
      }
    }
  }
  .left_2 {
    height: 20%;
    width: 100%;
    .left_2_contant {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      .l2b1 {
        color: #ffe400;
        img {
          width: 0.21rem;
        }
      }
      .l2b2 {
        color: #41bdff;
        img {
          width: 0.26rem;
        }
      }
      .l2b3 {
        color: #3cedfb;
        img {
          width: 0.39rem;
        }
      }
      .left_2_box {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        .left_2_box_1 {
          margin-right: 0.1rem;
        }
        .left_2_box_2 {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          .left_2_box_2_t {
            font-size: 0.28rem;
            font-family: DIN;
            font-weight: 900;
          }
          .left_2_box_2_b {
            font-size: 0.14rem;
            font-family: PingFangSC;
            font-weight: 400;
          }
        }
      }
    }
  }
  .left_3 {
    height: 25%;
    width: 100%;
    font-size: 0.14rem;
    font-family: PingFangSC;
    font-weight: 400;
    color: #41bdff;
    .left_3_contant {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      margin: 0 0.1rem;
      p {
        line-height: 0.35rem;
      }
    }
  }
}
.right {
  position: absolute;
  height: 90%;
  width: 18%;
  right: 3%;
  //   background-color: #00ccff;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  margin-top: 6%;
  .right_1 {
    height: 35%;
    width: 100%;
    .right_1_contant::-webkit-scrollbar {
      width: 0.05rem;
    }
    .right_1_contant::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      background-color: rgb(12, 27, 47);
      border-radius: 3px;
    }
    .right_1_contant::-webkit-scrollbar-thumb {
      border-radius: 7px;
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      background-color: #44beff;
    }
    .right_1_contant {
      margin: 0 0.1rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow-y: auto;
      .r1,
      .r3,
      .r5 {
        background: #193847;
      }
      .right1 {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        font-size: 0.14rem;
        font-family: PingFangSC;
        font-weight: 400;
        color: #41bdff;
        line-height: 0.31rem;
        .right1_l {
          // width: 60%;
        }
        .right1_r {
          // width: 40%;
        }
      }
    }
  }
  .right_2 {
    height: 35%;
    width: 100%;
    position: relative;
    .right_2_contant {
      position: absolute;
      left: 0.1rem;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }
  .right_3 {
    height: 20%;
    width: 100%;
    .right_3_contant {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .r3l1 {
        color: #41bdff;
      }
      .r3l2 {
        color: #ffe400;
      }
      .r3l3 {
        color: #3cedfb;
      }
      .right3 {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        .right3_l {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .right3_t {
            font-size: 0.14rem;
            font-family: PingFangSC;
            font-weight: 400;
          }
          .right3_b {
            font-size: 0.3rem;
            font-family: DIN;
            font-weight: 900;
          }
        }
      }
    }
  }
}
.bottom {
  position: absolute;
  width: 50%;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0.3rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  .warn {
    width: 50%;
    line-height: 0.43rem;
    color: #ff4141;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    .warn1 {
      display: flex;
      background: rgba($color: #000, $alpha: 0.7);
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 0.03rem;
      padding-right: 0.1rem;
      img {
        width: 0.24rem;
        height: 0.24rem;
        margin: 0 0.15rem;
      }
    }
  }
  .btn {
    margin-left: 0.3rem;
    width: 33%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    div {
      cursor: pointer;
      width: 0.41rem;
      height: 0.41rem;
      background-color: rgba($color: #000, $alpha: 0.7);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .bt1 {
      width: 0.25rem;
    }
  }
}
</style>
